import React, { Component } from 'react'

export default class App extends Component {
  //创建Ref对象,用于指向页面中的一个组件
  ref1 = React.createRef();

  state={
  }

  f1 = ()=>{
    //找到表单输入项,获取其值
    console.log(this.ref1.current.value)
    //发送给服务器..

  }

  /*
    非受控组件 - ref机制:
      由于表单项只能被用户控制 或 被数据绑定项控制,只能二选一
      所以 非受控组件方案 选择 由用户控制控制表单项
      则,不能直接将数据绑定项绑定到表单数据项上
      由用户随意的进行输入,在需要使用数据时,再获取所需表单项的值
      此时可以使用ref机制获取元素
  */
  render() {
    return (
      <>
        <h2>非受控组件 - 用户可以随意操作表单项</h2>
        <input 
          ref = {this.ref1}
          placeholder='请输入登录名称' 
        ></input>
        <button onClick={this.f1}>提交个人信息</button>
      </>
    )
  }
}
